<a href='https://github.com/angular/angular.js/edit/v1.6.x/src/ng/compile.js?message=docs($compileProvider)%3A%20describe%20your%20change...#L966' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>



<a href='https://github.com/angular/angular.js/tree/v1.6.6/src/ng/compile.js#L966' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>


<header class="api-profile-header">
  <h1 class="api-profile-header-heading">$compileProvider</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
  <li>
    <a href="api/ng/service/$compile">- $compile</a>
  </li>

    <li>
      - provider in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>





<div class="api-profile-description">
  
</div>




<div>
  

  

  

  
<h2>Methods</h2>
<ul class="methods">
  <li id="directive">
    <h3><p><code>directive(name, directiveFactory);</code></p>

</h3>
    <div><p>Register a new directive with the compiler.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-object">Object</a>
      </td>
      <td>
        <p>Name of the directive in camel-case (i.e. <code>ngBind</code> which
   will match as <code>ng-bind</code>), or an object map of directives where the keys are the
   names and the values are the factories.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        directiveFactory
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-function">function()</a><a href="" class="label type-hint type-hint-array">Array</a>
      </td>
      <td>
        <p>An injectable directive factory function. See the
   <a href="guide/directive">directive guide</a> and the <a href="api/ng/service/$compile">compile API</a> for more info.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-ng">ng.$compileProvider</a></td>
    <td><p>Self for chaining.</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="component">
    <h3><p><code>component(name, options);</code></p>

</h3>
    <div><p>Register a <strong>component definition</strong> with the compiler. This is a shorthand for registering a special
type of directive, which represents a self-contained UI component in your application. Such components
are always isolated (i.e. <code>scope: {}</code>) and are always restricted to elements (i.e. <code>restrict: &#39;E&#39;</code>).</p>
<p>Component definitions are very simple and do not require as much configuration as defining general
directives. Component definitions usually consist only of a template and a controller backing it.</p>
<p>In order to make the definition easier, components enforce best practices like use of <code>controllerAs</code>,
<code>bindToController</code>. They always have <strong>isolate scope</strong> and are restricted to elements.</p>
<p>Here are a few examples of how you would usually define components:</p>
<pre><code class="lang-js">var myMod = angular.module(...);
myMod.component(&#39;myComp&#39;, {
  template: &#39;&lt;div&gt;My name is {{$ctrl.name}}&lt;/div&gt;&#39;,
  controller: function() {
    this.name = &#39;shahar&#39;;
  }
});

myMod.component(&#39;myComp&#39;, {
  template: &#39;&lt;div&gt;My name is {{$ctrl.name}}&lt;/div&gt;&#39;,
  bindings: {name: &#39;@&#39;}
});

myMod.component(&#39;myComp&#39;, {
  templateUrl: &#39;views/my-comp.html&#39;,
  controller: &#39;MyCtrl&#39;,
  controllerAs: &#39;ctrl&#39;,
  bindings: {name: &#39;@&#39;}
});
</code></pre>
<p>For more examples, and an in-depth guide, see the <a href="guide/component">component guide</a>.</p>
<p><br />
See also <a href="api/ng/provider/$compileProvider#directive">$compileProvider.directive()</a>.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        name
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-string">string</a><a href="" class="label type-hint type-hint-object">Object</a>
      </td>
      <td>
        <p>Name of the component in camelCase (i.e. <code>myComp</code> which will match <code>&lt;my-comp&gt;</code>),
   or an object map of components where the keys are the names and the values are the component definition objects.</p>

        
      </td>
    </tr>
    
    <tr>
      <td>
        options
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-object">Object</a>
      </td>
      <td>
        <p>Component definition object (a simplified
   <a href="api/ng/service/$compile#directive-definition-object">directive definition object</a>),
   with the following properties (all optional):</p>
<ul>
<li><code>controller</code> – <code>{(string|function()=}</code> – controller constructor function that should be
associated with newly created scope or the name of a <a href="api/ng/service/$compile#-controller-">registered controller</a> if passed as a string. An empty <code>noop</code> function by default.</li>
<li><code>controllerAs</code> – <code>{string=}</code> – identifier name for to reference the controller in the component&#39;s scope.
If present, the controller will be published to scope under the <code>controllerAs</code> name.
If not present, this will default to be <code>$ctrl</code>.</li>
<li><p><code>template</code> – <code>{string=|function()=}</code> – html template as a string or a function that
returns an html template as a string which should be used as the contents of this component.
Empty string by default.</p>
<p>If <code>template</code> is a function, then it is <a href="api/auto/service/$injector#invoke">injected</a> with
the following locals:</p>
<ul>
<li><code>$element</code> - Current element</li>
<li><code>$attrs</code> - Current attributes object for the element</li>
</ul>
</li>
<li><p><code>templateUrl</code> – <code>{string=|function()=}</code> – path or function that returns a path to an html
template that should be used  as the contents of this component.</p>
<p>If <code>templateUrl</code> is a function, then it is <a href="api/auto/service/$injector#invoke">injected</a> with
the following locals:</p>
<ul>
<li><code>$element</code> - Current element</li>
<li><code>$attrs</code> - Current attributes object for the element</li>
</ul>
</li>
<li><p><code>bindings</code> – <code>{object=}</code> – defines bindings between DOM attributes and component properties.
Component properties are always bound to the component controller and not to the scope.
See <a href="api/ng/service/$compile#-bindtocontroller-"><code>bindToController</code></a>.</p>
</li>
<li><code>transclude</code> – <code>{boolean=}</code> – whether <a href="api/ng/service/$compile#transclusion">content transclusion</a> is enabled.
Disabled by default.</li>
<li><code>require</code> - <code>{Object&lt;string, string&gt;=}</code> - requires the controllers of other directives and binds them to
this component&#39;s controller. The object keys specify the property names under which the required
controllers (object values) will be bound. See <a href="api/ng/service/$compile#-require-"><code>require</code></a>.</li>
<li><code>$...</code> – additional properties to attach to the directive factory function and the controller
constructor function. (This is used by the component router to annotate)</li>
</ul>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-ng">ng.$compileProvider</a></td>
    <td><p>the compile provider itself, for chaining of function calls.</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="aHrefSanitizationWhitelist">
    <h3><p><code>aHrefSanitizationWhitelist([regexp]);</code></p>

</h3>
    <div><p>Retrieves or overrides the default regular expression that is used for whitelisting of safe
urls during a[href] sanitization.</p>
<p>The sanitization is a security measure aimed at preventing XSS attacks via html links.</p>
<p>Any url about to be assigned to a[href] via data-binding is first normalized and turned into
an absolute url. Afterwards, the url is matched against the <code>aHrefSanitizationWhitelist</code>
regular expression. If a match is found, the original url is written into the dom. Otherwise,
the absolute url is prefixed with <code>&#39;unsafe:&#39;</code> string and only then is it written into the DOM.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        regexp
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-regexp">RegExp</a>
      </td>
      <td>
        <p>New regexp to whitelist urls with.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-regexp">RegExp</a><a href="" class="label type-hint type-hint-ng">ng.$compileProvider</a></td>
    <td><p>Current RegExp if called without value or self for
   chaining otherwise.</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="imgSrcSanitizationWhitelist">
    <h3><p><code>imgSrcSanitizationWhitelist([regexp]);</code></p>

</h3>
    <div><p>Retrieves or overrides the default regular expression that is used for whitelisting of safe
urls during img[src] sanitization.</p>
<p>The sanitization is a security measure aimed at prevent XSS attacks via html links.</p>
<p>Any url about to be assigned to img[src] via data-binding is first normalized and turned into
an absolute url. Afterwards, the url is matched against the <code>imgSrcSanitizationWhitelist</code>
regular expression. If a match is found, the original url is written into the dom. Otherwise,
the absolute url is prefixed with <code>&#39;unsafe:&#39;</code> string and only then is it written into the DOM.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        regexp
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-regexp">RegExp</a>
      </td>
      <td>
        <p>New regexp to whitelist urls with.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-regexp">RegExp</a><a href="" class="label type-hint type-hint-ng">ng.$compileProvider</a></td>
    <td><p>Current RegExp if called without value or self for
   chaining otherwise.</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="debugInfoEnabled">
    <h3><p><code>debugInfoEnabled([enabled]);</code></p>

</h3>
    <div><p>Call this method to enable/disable various debug runtime information in the compiler such as adding
binding information and a reference to the current scope on to DOM elements.
If enabled, the compiler will add the following to DOM elements that have been bound to the scope</p>
<ul>
<li><code>ng-binding</code> CSS class</li>
<li><code>$binding</code> data property containing an array of the binding expressions</li>
</ul>
<p>You may want to disable this in production for a significant performance boost. See
<a href="guide/production#disabling-debug-data">Disabling Debug Data</a> for more.</p>
<p>The default value is true.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        enabled
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>update the debugInfoEnabled state if provided, otherwise just return the
current debugInfoEnabled state</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">*</a></td>
    <td><p>current value if used as getter or itself (chaining) if used as setter</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="preAssignBindingsEnabled">
    <h3><p><code>preAssignBindingsEnabled([enabled]);</code></p>

</h3>
    <div><p>Call this method to enable/disable whether directive controllers are assigned bindings before
calling the controller&#39;s constructor.
If enabled (true), the compiler assigns the value of each of the bindings to the
properties of the controller object before the constructor of this object is called.</p>
<p>If disabled (false), the compiler calls the constructor first before assigning bindings.</p>
<p>The default value is false.</p>
</div>

    
<div class="alert alert-danger deprecation">
  <div class="title"><strong>Deprecated:</strong>
    <span class="since">(since 1.6.0) </span>
    <span class="remove">(to be removed in 1.7.0) </span>
  </div>
  <p>This method and the option to assign the bindings before calling the controller&#39;s constructor
will be removed in v1.7.0.</p>

</div>


    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        enabled
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>update the preAssignBindingsEnabled state if provided, otherwise just return the
current preAssignBindingsEnabled state</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">*</a></td>
    <td><p>current value if used as getter or itself (chaining) if used as setter</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="strictComponentBindingsEnabled">
    <h3><p><code>strictComponentBindingsEnabled([enabled]);</code></p>

</h3>
    <div><p>Call this method to enable/disable strict component bindings check. If enabled, the compiler will enforce that
for all bindings of a component that are not set as optional with <code>?</code>, an attribute needs to be provided
on the component&#39;s HTML tag.</p>
<p>The default value is false.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        enabled
        
        <div><em>(optional)</em></div>
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p>update the strictComponentBindingsEnabled state if provided, otherwise just return the
current strictComponentBindingsEnabled state</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-object">*</a></td>
    <td><p>current value if used as getter or itself (chaining) if used as setter</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="onChangesTtl">
    <h3><p><code>onChangesTtl(limit);</code></p>

</h3>
    <div><p>Sets the number of times <code>$onChanges</code> hooks can trigger new changes before giving up and
assuming that the model is unstable.</p>
<p>The current default is 10 iterations.</p>
<p>In complex applications it&#39;s possible that dependencies between <code>$onChanges</code> hooks and bindings will result
in several iterations of calls to these hooks. However if an application needs more than the default 10
iterations to stabilize then you should investigate what is causing the model to continuously change during
the <code>$onChanges</code> hook execution.</p>
<p>Increasing the TTL could have performance implications, so you should not change it without proper justification.</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        limit
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-number">number</a>
      </td>
      <td>
        <p>The number of <code>$onChanges</code> hook iterations.</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-number">number</a><a href="" class="label type-hint type-hint-object">object</a></td>
    <td><p>the current limit (or <code>this</code> if called as a setter for chaining)</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="commentDirectivesEnabled">
    <h3><p><code>commentDirectivesEnabled(enabled);</code></p>

</h3>
    <div><p>It indicates to the compiler
whether or not directives on comments should be compiled.
Defaults to <code>true</code>.</p>
<p>Calling this function with false disables the compilation of directives
on comments for the whole application.
This results in a compilation performance gain,
as the compiler doesn&#39;t have to check comments when looking for directives.
This should however only be used if you are sure that no comment directives are used in
the application (including any 3rd party directives).</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        enabled
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p><code>false</code> if the compiler may ignore directives on comments</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a><a href="" class="label type-hint type-hint-object">object</a></td>
    <td><p>the current value (or <code>this</code> if called as a setter for chaining)</p>
</td>
  </tr>
</table>
    </li>
  
  <li id="cssClassDirectivesEnabled">
    <h3><p><code>cssClassDirectivesEnabled(enabled);</code></p>

</h3>
    <div><p>It indicates to the compiler
whether or not directives on element classes should be compiled.
Defaults to <code>true</code>.</p>
<p>Calling this function with false disables the compilation of directives
on element classes for the whole application.
This results in a compilation performance gain,
as the compiler doesn&#39;t have to check element classes when looking for directives.
This should however only be used if you are sure that no class directives are used in
the application (including any 3rd party directives).</p>
</div>

    

    
    <h4>Parameters</h4>
    
<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        enabled
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-boolean">boolean</a>
      </td>
      <td>
        <p><code>false</code> if the compiler may ignore directives on element classes</p>

        
      </td>
    </tr>
    
  </tbody>
</table>

    

    

    
    <h4>Returns</h4>
    <table class="variables-matrix return-arguments">
  <tr>
    <td><a href="" class="label type-hint type-hint-boolean">boolean</a><a href="" class="label type-hint type-hint-object">object</a></td>
    <td><p>the current value (or <code>this</code> if called as a setter for chaining)</p>
</td>
  </tr>
</table>
    </li>
  </ul>
  
  



  
</div>


